<template>
    <div class="manage_page fillcontain">
        <div style="height:100%">

            <div style="position:absolute;width:210px;height: 100%;overflow:hidden;overflow-y:auto; background-color: rgb(50, 64, 87);">

                <el-menu style="height: 100%;" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="false">
                    <!-- <el-menu-item index="manage" title="首页"><i class="el-icon-menu"></i>首页</el-menu-item> -->
                    <el-menu-item index="manage" @click="addTab('首页','/manage')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu :key="menu.dataId" v-for="menu in menus" :index="menu.id">
                        <template slot="title" @click="addTab(item.text,item.url||'')">
                            <i class="el-icon-menu"></i>
                            <span>{{ menu.text }}</span>
                        </template>
                        <el-menu-item v-if="menu.children" v-for="item in menu.children" :key="item.dataId" :title="item.text" :index="item.id" @click="addTab(item.text,item.url||'')">
                            <i class="el-icon-star-off"></i>{{ item.text }}
                        </el-menu-item>
                    </el-submenu>
                    <!-- <el-submenu :key="menu.dataId" v-for="menu in menus" :index="menu.id">
						<template slot="title">
							<i class="el-icon-menu"></i>
							<span>{{ menu.text }}</span>
						</template>
						<el-menu-item style=" " v-for="item in menu.children" :key="item.dataId" 
							:title="item.text" :index="item.id" @click="addTab(item.text,item.url||'')">
							<i class="el-icon-star-off"></i>{{ item.text }}
						</el-menu-item>
					</el-submenu> -->
                </el-menu>
            </div>
            <div style="margin-left:210px;height: 100%;overflow: auto;">
                <head-top></head-top>
                <el-tabs type="card" v-model="activeTabs" @tab-click="tabClick" @tab-remove="removeTab">
                    <!-- <el-tab-pane key="/manage" label="首页" name="/manage">
                    </el-tab-pane> -->
                    
                    <!-- 首页不需要显示关闭按钮 -->
                    <el-tab-pane v-for="(item) in allTabs" :closable="item.href!='/manage'" :key="item.href" :label="item.title" :name="item.href">
                        <!-- v-rightMenu -->
                    </el-tab-pane>
                </el-tabs>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
    </div>
</template>

<script>
import headTop from '@/components/headTop'
import { getMenuLists } from '@/api/getData'
import { getStore } from '@/config/mUtils'
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
    data () {
        return {
            /* isShow: false,
            rightMenu: {
            left: '0px',
            top: '0px',
            href: '/index'
            }, */
            // isShow:false,
            allTab: [],
            menus: [],
            activeTabs: '/index'
        }
    },
    computed: {
        ...mapState(['allTabs', 'activeTab']),
        ...mapGetters([
            'getActiveTab',
            // ...
        ]),
        defaultActive: function () {
            return this.$route.path.replace('/', '');
        }
    },
    updated () {
        console.log(this.allTabs, this.activeTab);
        this.activeTabs = this.$store.getters.getActiveTab
        this.allTab = this.$store.getters.getAllTabs
    },
    created () {
        var t = {
            href: '/manage',
            title: '首页'
        }
        this.addTabs(t);
        this.initData();
        // this.getTabs(this.tabs);
    },
    components: {
        headTop,
    },
    methods: {
        ...mapActions(['addTabs', 'setActiveTab', 'removeTabs']),
        async initData () {

            try {
                /*     this.city = await cityGuess();
                    const countData = await getResturantsCount();
                    if (countData.status == 1) {
                        this.count = countData.count;
                    }else{
                        throw new Error('获取数据失败');
                    } */
                this.getMenuLists();
            } catch (err) {
                console.log('获取数据失败', err);
            }
        },
        async getMenuLists () {
            var _this = this

            // const menus = await getMenuLists();
            this.tableData = [];
            // _this.menus = menus.ret;


            if (getStore('personcode') == 'admin') {
                _this.menus = [
                    // {
                    //     dataId: '1',
                    //     id: '1',
                    //     text: '首页',
                    //     url: '/manage'
                    // },
                    {
                        dataId: '2',
                        id: '2',
                        text: '数据管理',
                        children: [{
                            id: '201',
                            text: '储值卡账户',
                            url: '/carduserList'
                        }, {
                            id: '202',
                            text: '修补单据',
                            url: '/rpairBills'
                        }, {
                            id: '203',
                            text: '解冻、冻结单据',
                            url: '/frozenBills'
                        }, {
                            id: '204',
                            text: '日汇总',
                            url: '/QueryRj'
                        }, {
                            id: '205',
                            text: '员工推荐报表',
                            url: '/QueryTJ'
                        }, {
                            id: '206',
                            text: '门店支付明细',
                            url: '/QueryMDJX'
                        }, {
                            id: '207',
                            text: '门店汇总支付明细',
                            url: '/QueryMDHZJX'
                            // },{
                            // 	id:'204',
                            // 	text:'创建修补单',
                            // 	url:'/insertRepairBill'
                        }]
                    }, {
                        dataId: '3',
                        id: '3',
                        text: '管理员',
                        children: [{
                            id: '301',
                            text: '管理员列表',
                            url: '/adminPersons'
                        }, {
                            id: '302',
                            text: '修改密码',
                            url: '/adminPersonPwd'
                        }]
                    }];
            } else {
                _this.menus = [
                    // {
                    //     dataId: '1',
                    //     id: '1',
                    //     text: '首页',
                    //     url: '/manage',
                    //     children: []
                    // },
                    {
                        dataId: '2',
                        id: '2',
                        text: '数据管理',
                        children: [{
                            id: '201',
                            text: '储值卡账户',
                            url: '/carduserList'
                        }, {
                            id: '202',
                            text: '修补单据',
                            url: '/rpairBills'
                        }, {
                            id: '203',
                            text: '解冻、冻结单据',
                            url: '/frozenBills'
                        }, {
                            id: '204',
                            text: '日汇总',
                            url: '/QueryRj'
                        }, {
                            id: '205',
                            text: '员工推荐报表',
                            url: '/QueryTJ'
                        }, {
                            id: '206',
                            text: '门店汇总支付明细',
                            url: '/QueryMDJX'
                            // },{
                            // 	id:'204',
                            // 	text:'创建修补单',
                            // 	url:'/insertRepairBill'
                        }]
                    }, {
                        dataId: '3',
                        id: '3',
                        text: '管理员',
                        children: [{
                            id: '302',
                            text: '修改密码',
                            url: '/adminPersonPwd'
                        }]
                    }];
            }

            /* _this.count = malls.total
    malls.rows.forEach(item => {
        const tableData = {};
        tableData.name = item.name;
        tableData.code = item.code;
        tableData.mdaddress = item.mdaddress;
        tableData.id = item.id;
        tableData.yttype = item.yttype;
        tableData.yttypename = this.getyttypeName(item.yttype);
        this.tableData.push(tableData);
    }) */
        },
        removeTab (a) {

            // a为tab的name
            let index = 0;
            let name = a;
            for (var i = 0; i < this.allTabs.length; i++) {
                if (this.allTabs[i].href == a) {
                    index = i;
                    break;
                }
            }

            this.removeTabs([index, name])
            console.log('activeTab', this.activeTab);
            console.log('activeTab', this.$store.getters.getAllTabs);
            console.log('activeTab', this.$store.getters.getActiveTab);


            this.activeTabs = this.$store.getters.getActiveTab
            this.$router.push(this.activeTabs);
            setTimeout(() => { }, 800);

            // // /* 取得所在位置，然后删除 */
            // // this.allTabs.splice(index,1);
            // /* 判断当前关闭的是否为activeTab */
            // if(this.activeTab == name) {
            // 	if(this.allTabs.length > 0) {
            // 		/* 让前一个成为activeTab,首先得到上一个tab的href */
            // 		let href = this.allTabs[index-1].href;
            // 		this.activeTabs = href;
            // 		this.$router.push(href);
            // 	}else {
            // 		this.activeTabs = '/manage';
            // 		this.$router.push('/manage');
            // 	}
            // }
        },
        tabClick (a) {
            // a为实例化的tab
            let href = a.name;
            this.setActiveTab(href)
            this.$router.push(href);
        },
        addTab (title, href) {
            var t = {
                href: href,
                title: title
            }

            // this.isTabs(t)
            console.log(111111111111111);


            this.addTabs(t)

            this.activeTabs = href;
            this.$router.push(href);
            console.log(title, href)
            // console.log(this.$route);

            // /* 判断是否存在这个路由 */
            // for(let i=0;i<this.allTabs.length;i++) {
            // 	if(this.allTabs[i].href==href) {
            // 		this.activeTab = href;
            // 		this.$router.push(href);
            // 		return;
            // 	}
            // }
            // this.getTabs({
            // 	href: href,
            // 	title: title
            // });
            // this.allTabs.push({
            // 	href: href,
            // 	title: title
            // });
            // this.activeTab = href;
            // this.$router.push(href);
        }
    }

}
</script>


<style lang="less" scoped>
@import "../style/mixin";
.manage_page {
}
.el-submenu .el-menu-item {
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 20px;
}
.el-form-item {
    margin-bottom: 12px;
}
</style>
